<template>
	<view class="parkRecord_list">
		<view class="card_block margin-bt30 bold" 
		@click="detail(item)"
		v-for="(item,index) in list" :key="index">
			<view class="parkRecord_item" 
			:class="[
				pageMode == 'scanPark' || pageMode == 'currentOrder' 
				? 'item_bgColor' : '']">
				
				<view @click.stop="cartChange(item,index)" class="item_header flex_hcneter">
					<view  v-if="radio" >
						<radio color="#2979ff" :checked="item.flag" />
					</view>
					<view class="item_logo">
						<u-image
						class=""
						width="48rpx"
						height="44rpx" 
						:src="item.activeType == 2 ? imgPath.common_blue : imgPath.common_green"></u-image>
					</view>
					<view v-if="item.activeType == 2" class="flex_flex name txt-ellipsis">{{item.carnumber || ''}}</view>
					<!-- 扫码缴费页面 -->
					<view v-else class="flex_flex name txt-ellipsis">主动登记</view>
					<view v-if="pageMode == 'currentOrder'" class="sign flex_zhcenter">当前订单</view>
					<view v-if="item.iscompleted == 1" class="status item_staColor_yellow">已完成</view>
					<view v-else-if="item.isleaving == 0" class="status item_staColor_blue">停车中</view>
					<view v-else class="status item_staColor_red">欠费中</view>
					<text v-if="!detailLink" 
					style="margin-left: 20rpx;font-size: 44rpx;"
					class="item_staColor_red">¥{{item.arrearPay || 0}}</text>
				</view>
				<view class="margin-bt30">
					<view class="swiper" v-if="item.imageList && pageMode == 'currentOrder'">
						<u-swiper img-mode="aspectFit" @click="(e)=>seiperClcik(e,item.imageList)" v-if="item.imageList.length" :list="item.imageList"></u-swiper>
					</view>
				</view>
				
				<view class="item_one flex_hcneter_bet margin-bt30">
					<view class="flex_flex bowei overfHidden flex_hcneter">
						<view class="wordBreak">
							{{boweiShow ? '泊位编号：' : (item.createby === 4 ? '停车场：' : '街道名称：')}}
						</view>
						<view :style="{'text-align': detailLink ? '' : 'end'}" 
						class="bianhao flex_flex txt-ellipsis">{{boweiShow ? (item.placenum || '') : (item.parklotname || '')}}</view>
					</view>
					<view class="flex_hcneter" v-if="!teshuPrice && detailLink">
						{{item.iscompleted == 1 ? '已付' : '应付'}}：<text 
						:class="[carModel != 2 && item.iscompleted != 1 ? 'item_staColor_red' : '']"
						class=" price bold">¥{{item[moneyShow] || 0}}</text>
					</view>
					<view class="flex_hcneter" 
					v-if="teshuPrice && item.isArrearage && item.iscompleted && detailLink">
						{{item.iscompleted == 1 ? '已付' : '应付'}}：<text 
						:class="[carModel != 2 && item.iscompleted != 1 ? 'item_staColor_red bold' : '']"
						class=" price bold">¥{{item[moneyShow] || 0}}</text>
					</view>
				</view>
				
				<view class="flex_hcneter_bet margin-bt30" v-if="!detailLink">
				  <view>泊位编号：</view>
				  <view class="txt-ellipsis">
				    {{item.placenum}}
				  </view>
				</view>
				
				<view class="flex_hcneter margin-bt30">
					<view class="flex_flex overfHidden flex_hcneter">
						<view class="wordBreak">驶入时间：</view>
						<view 
						:style="{'text-align': detailLink ? '' : 'end'}" 
						class="flex_flex txt-ellipsis">
							{{item.startTime || ''}}
						</view>
					</view>
					<u-icon name="arrow-right" v-if="carModel == 2" size="32" color="#B3B3B3"></u-icon>
				</view>
				
				<!-- :class="[item.isShowMore ? 'show-more' : '']" -->
				<view 
				v-if="item.isShowMore"
				class="content-part">
					<view class="flex_hcneter margin-bt30" v-if="!detailLink">
						<view
						v-if="item.isleaving == 1" 
						class="flex_flex overfHidden flex_hcneter">
							<view class="wordBreak">停车时长：</view>
							<view 
							:style="{'text-align': detailLink ? '' : 'end'}" 
							class="flex_flex txt-ellipsis">{{item.parkingSecondStr || 0}}</view>
						</view>
						<view v-else class="flex_flex overfHidden flex_hcneter">
							<view class="wordBreak">停车时长：</view>
							<view 
							:style="{'text-align': detailLink ? '' : 'end'}" 
							class="flex_flex txt-ellipsis">{{ YyMmDdToTimes(item.startTime) | formatSeconds}}</view>
						</view>
					</view>
					<view class="flex_hcneter_bet margin-bt30" 
					v-if="item.createby !== 4 && configApi.isShowMunicipalPlacenum && item.municipalPlacenum">
							<view>市政编码：</view>
							<view class="item_staColor_blue">{{item.municipalPlacenum}}</view>
					</view>
				
				  <view class="flex_hcneter_bet margin-bt30">
				    <view>订单编号：</view>
				    <view class="flex_hcneter">
				      <view class="fuzhi" @click.stop="toCopy(item.orderNo)">复制</view>
				      {{item.orderNo}}
				    </view>
				  </view>
				  <view class="flex_hcneter_bet margin-bt30" v-if="item.createby === 4">
				    <view>街道名称：</view>
				    <view>{{item.parklotname}}</view>
				  </view>
					<div v-if="item[quzhengImg]">
						<view
						class="flex_hcneter_bet margin-bt30" 
						v-if="item[quzhengImg].length && qzModel == 1">
						  <view>
						    取证时间：
						    <view class="copy preview-img-btn" @click.stop="handlePreviewImg(item[quzhengImg])">查看图片</view>
						  </view>
						  <view>{{item.submitTime || ''}}</view>
						</view>
					</div>
				  
				  <view class="flex_hcneter_bet margin-bt30" v-if="qzModel == 2">
				    <view>
				      取证时间：
				    </view>
				    <view>{{item.submitTime || ''}}</view>
				  </view>
					<div v-if="item[quzhengImg]">
						<view class="flex_hcneter_bet margin-bt30" v-if="item[quzhengImg].length && qzModel == 3">
						  <view>
						    取证时间：
						  </view>
						  <view @click.stop="handlePreviewImg(item[quzhengImg])">{{item.submitTime || ''}}</view>
						</view>
					</div>
					
				  <view class="flex_hcneter_bet margin-bt30">
				    <view>驶出时间：</view>
				    <view>{{item.endtime || '停车中'}}</view>
				  </view>
				  <view class="flex_hcneter_bet margin-bt30">
				    <view>应付金额：</view>
				    <view class="item_staColor_red">￥{{item.needPay || 0}}</view>
				  </view>
				  <view class="flex_hcneter_bet margin-bt30">
				    <view>已付金额：</view>
				    <view>￥{{item.payamount || 0}}</view>
				  </view>
				</view>
				
				<view class="flex_hcneter_bet" v-if="detailLink">
					<view 
					v-if="item.isleaving == 1" 
					class="flex_flex txt-ellipsis">
						停车时长：{{item.parkingSecondStr || 0}}
					</view>
					<view v-else class="flex_flex txt-ellipsis">
						停车时长：{{ YyMmDdToTimes(item.startTime) | formatSeconds}}
					</view>
					<view 
					v-if="carModel != 2 && item.iscompleted == 0" 
					class="item_bt flex_zhcenter">
						{{btnTxt}}
					</view>
					<view 
					@click.stop="remove(item)"
					v-if="carModel != 2 && item.iscompleted == 1" 
					class="item_bt1 flex_zhcenter">移除</view>
				</view>
				
				<view class="flex_hend flex_hcneter" v-if="!detailLink">
					<block v-if="item.isShowMore">
					  <view class="item_bt2" @click.stop="orderLisk(item)">订单疑义</view>
					  <view class="item_bt2" @click.stop="handleShowRulePopup(item)">收费规则</view>
					</block>
					<view
					@click.stop="detailShow(item,index)"
					v-if="(carModel != 2 && item.iscompleted == 0) || detailBtnShow" 
					class="item_bt flex_zhcenter">
						{{btnTxt}}
						<view class="icons">
							<u-icon :name="item.isShowMore ? 'arrow-up' : 'arrow-down'"></u-icon>
						</view>
					</view>
				</view>
				
			</view>
		</view>
		<!-- model弹窗 -->
		<showModel :modelShow="modelShow" 
		@confim="modelConfim" @close="modelShow = false"></showModel>
		
		<!-- 提示 -->
		<tipsPop 
		:popCont="popCont"
		@close="popShow = false" 
		:popShow="popShow" 
		:btModel="1"
		popTitle="收费标准与停车说明"
		:maskClose="false"
		popbtCancel="关闭">
			<view
			style="font-size: 28rpx;"
			class="" slot="cont_text">
				<view class="sfxq">收费详情：</view>
				<view class="margin-bt30">
					<u-parse :html="listDetail.ruleDetail"></u-parse>
				</view>
				<view class="sfxq">停车说明：</view>
				<u-parse :html="listDetail.warning"></u-parse>
			</view>
		</tipsPop>
	</view>
</template>

<script>
	import showModel from '@/components/showModel/index.vue'
	import tipsPop from '@/components/tipsPop/index.vue'
	import  { imgPath } from '@/static/imgPath.js'
	import { getImgLink } from "@/utils/image.js";
	import  { configApi } from '@/commApi/config.js'
	export default {
	  name: "index",
	  components: {
	    showModel,tipsPop,
	  },
		props: {
			detailBtnShow:{//是够强制显示详情
				type: [Boolean],
				default:()=>{
					return false
				}
			},
			quzhengImg:{//取证图片的字段
				type: [String],
				default:()=>{
					return 'imgList'
				}
			},
			pageMode:{//调用的页面(comm表示公用)
				type: [String],
				default:()=>{
					return 'comm'
				}
			},
			qzModel:{//取证显示模式
				type: [Number,String],
				default:()=>{
					return 1
				}
			},
			boweiShow: {//金额显示字段
				type: [Boolean],
				default:()=>{
					return false
				}
			},
			detailLink:{//是否需要前往详情页面(同时也是吧详情显示在列表的字段)
				type: [Boolean],
				default:()=>{
					return true
				}
			},
			teshuPrice:{//处理价格是否条件显示 默认不做条件显示
				type: [Boolean],
				default:()=>{
					return false
				}
			},
			moneyShow: {//金额显示字段
				type: [String],
				default:()=>{
					return 'needPay'
				}
			},
			btnTxt: {//第一个按钮显示文字
				type: [String],
				default:()=>{
					return '待支付'
				}
			},
			carDetailLinkModel: {//列表详情跳转模式(1.跳转详情2.选择返回)
				type: [Number,String],
				default:()=>{
					return 1
				}
			},
			carModel: {//列表显示模式 （模式2是为了客服中心里的列表选择）
				type: [Number,String],
				default:()=>{
					return 1
				}
			},
			radio: {//是否显示选择框
				type: [Boolean],
				default:()=>{
					return false
				}
			},
			list: {//列表数据
				type: [Array],
				default:()=>{
					return []
				}
			},
		},
	  data() {
	    return {
				popCont:'',//弹窗内容
				popShow:false,//
				modelShow:false,//
				pkParkrecordId:'',
				qsShao:false,//是否扫二维码
				imgPath,//图片地址
				managerId: null ,// 巡检id
				listDetail:{},//选中详情
				configApi,
	    };
	  },
	  async mounted() {
	    
	  },
	  methods: {
			async seiperClcik(index,list){//轮播点击
				let ress = await uni.previewImage({
					urls:list,
					current:index,
				});
			},
			YyMmDdToTimes(time){
				var data = new Date().getTime() / 1000 - new Date(time).getTime() / 1000
				return data
			},
			cartChange(obj,index){//点击选中车
				if(!this.radio) return
				this.$emit('cartChange',obj,index)
			},
			setQsSao(qsShao,managerId){
				this.qsShao = qsShao
				this.managerId = managerId
			},
			async detailShow(e,index){//列表不需要跳转详情
				if(this.detailLink) return
				let { pkParkrecordId, placenum } = e
				let list = [...this.list]
				if(!list[index].loaded){
					uni.showLoading({title: '加载中'})
					let getParkInfo = await this.$u.api.getParkInfo({ pkParkrecordId,loader: true })
					let getProcessInfo = await this.$u.api.getProcessInfo({ parkrecordId:pkParkrecordId })
					let getFeeRule = await this.$u.api.getFeeRule({ placenum })
					uni.hideLoading()
					if(!getParkInfo || !getProcessInfo || !getFeeRule ) return
					let getParkInfoObj = getParkInfo.data || {}
					let getProcessInfoObj = getProcessInfo.data || { submitTime: null, imgs: null }
					let getFeeRuleObj = getFeeRule.data || {}
					let { parklotname, endtime,municipalPlacenum } = getParkInfoObj
					let { submitTime, imgs } = getProcessInfoObj
					let { ruleDetail, warning } = getFeeRuleObj
					list[index].loaded = true
					list[index].parklotname = parklotname || ''
					list[index].endtime = endtime || ''
					list[index].municipalPlacenum = municipalPlacenum || ''
					list[index].imgList = imgs || []
					list[index].submitTime = submitTime || ''
					ruleDetail = (ruleDetail || '').replace(/\n/g, "<br/>")
					warning = (warning || '').replace(/\n/g, "<br/>")
					list[index].ruleDetail = ruleDetail || ''
					list[index].warning = warning || ''
				}else{
					uni.hideLoading()
				}
				console.log(list)
				const otherIndex = list.findIndex(item => (item.isShowMore))
				if(otherIndex != -1 && otherIndex !== index){
					list[otherIndex].isShowMore = false
				}
				list[index].isShowMore = !list[index].isShowMore
				this.list = [...list]
			},
			detail(e){//详情
				if(!this.detailLink) return
				let { pkParkrecordId } = e
				if(this.carDetailLinkModel == 2){
					this.$emit('detail',e)
				}else{
					uni.setStorageSync('parkDetail',JSON.stringify(e))
					uni.navigateTo({
						url:`/pages/parkingLot/parkDetail?pkParkrecordId=${pkParkrecordId || ''}&qsShao=${this.qsShao}&managerId=${this.managerId || ''}`
					})
				}
			},
			handleShowRulePopup(e){//收费规则
				console.log(e)
				this.listDetail = {...e}
				this.popCont = ``
				this.popShow = true
			},
			//订单异议跳转
			orderLisk(){
				uni.navigateTo({
					url:'/pages/personal/customerCenter'
				})
			},
			async toCopy(e){//复制
				console.log('e',e)
				uni.setClipboardData({
					data: e,
					success:  ()=> {
						this.$u.toast('复制成功~');
					}
				});
			},
			async handlePreviewImg(list){
				let imgs = list || []
				if(imgs.length <= 0) return this.$u.toast('暂无取证图片~');
				imgs = imgs.map(item=>{
					return getImgLink(item)
				})
				uni.previewImage({
					urls: [...imgs],
				});
			},//查看图片
			remove(e){//移除
				this.modelShow = true
				this.pkParkrecordId = e.pkParkrecordId
			},
			modelConfim(){//model确定
				this.modelShow = false
				this.$emit('toDetele',this.pkParkrecordId)
			},
	  }
	};
</script>

<style lang="less" scoped>
	.parkRecord_list{
		margin: 30rpx 20rpx 50rpx;
		.item_bgColor{background: linear-gradient(to bottom, #E5F3FE,#fff,#fff);}
		.parkRecord_item{
			padding: 0 20rpx 30rpx; font-size: 30rpx;color: #656565;
			.content-part {
				// height: 0rpx;
				// overflow: hidden;
				// transition: height 0.3s ease;
				// transition: 0.3s;
				.content-item{
					
				}
			}
			.copy{
			  font-size: 20rpx;
			  font-weight: 400;
			  color: #0072FF;
			  width: 56rpx;
			  line-height: 28rpx;
			  background: rgba(0,114,255,0.2);
			  border-radius: 4rpx 4rpx 4rpx 4rpx;
			  border: 2rpx solid #0072FF;
			  text-align: center;
			  display: inline-block;
			  margin-right: 10rpx;
			}
			.preview-img-btn{
			  width: 100rpx;
			  border-radius: 16rpx;
			  line-height: 32rpx;
			}
			.show-more{height: 500rpx!important;}
			.fuzhi{
				border-radius: 4rpx;color: #0072FF;background-color: #CCE3FF;
				border: 2rpx solid #0072FF;font-size: 20rpx;padding: 3rpx 8rpx;
				margin-right: 20rpx;
			}
			.content-item {
			  font-size: 28rpx;
			  color: #656565;
			  margin-bottom: 20rpx;
			}
			.item_header{
				height: 100rpx;width: 100%;border-bottom: 2rpx solid #EEEEEE;
				.sign{
					width: 118rpx;height: 38rpx;border-radius: 6rpx;
					margin-left: 5rpx;font-size: 22rpx;background: #C9E1FF;
					color: #63A8FF;
				}
				.item_logo{margin-left: 10rpx;margin-right: 20rpx;}
				.name{font-size: 32rpx;color: #333333;font-weight: bold;}
				.status{margin-left: 20rpx;}
			}
			.swiper{}
			.item_one{
				.bowei{margin-right: 20rpx;overflow: hidden;}
				.bianhao{color: #4888F6;font-size: 34rpx;}
				.price{font-size: 40rpx;}
			}
			.icons{margin-left: 5rpx;}
			.item_bt,.item_bt1,.item_bt2{
				border-radius: 24rpx;box-sizing: border-box;
				padding: 8rpx 15rpx;
			}
			.item_bt2{background-color: #63A8FF;color: #fff;margin-right: 20rpx;}
			.item_bt1{color: #7A7A7A;border: 2rpx solid #7A7A7A;}
			.item_bt{background-color: #FF5408;color: #fff;}
		}
	}
</style>